<template>
  <div class="canteen-food-container">
    <h2 class="page-title">餐饮食堂</h2>

    <!-- 搜索框和按钮同一行，左右分布 -->
    <div class="search-bar">
      <el-input
        v-model="searchText"
        placeholder="请输入食物介绍关键词"
        clearable
        style="width: 300px;"
      />
      <el-button type="success" @click="goToInfo">
        个人订单详情
      </el-button>
    </div>

    <el-row :gutter="20">
      <el-col :span="8" v-for="(food, index) in filteredFoodList" :key="index">
        <el-card :body-style="{ padding: '16px' }">
          <img :src="food.foodImg" alt="food" class="food-img uniform-food-img" />
          <div class="food-info">
            <div class="food-name">{{ food.foodName }}</div>
            <div class="food-intro">{{ food.foodIntro }}</div>
            <div class="food-price-kcal">
              <span>价格：{{ food.price }}元</span>
              <button class="el-button el-button--primary" @click="handleBuy(food,user)">购买</button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <div class="float-ball" @click="goToAIChat">
      <span>AI</span>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, reactive } from 'vue';

import { findAll, addfoodOrder ,alipay,findOrderDetailsByUserId} from '@/api/food.js';
import { useUserStore } from '@/stores/userStore';
import { number } from 'echarts';
import { useRouter } from 'vue-router';

const router = useRouter();
const userStore = useUserStore()
const foodList = ref([]);
const searchText = ref('');
const user=reactive({

});
const foodData = ref({
  userId: null,
  foodId: 0,

});

// 计算属性：根据食物介绍模糊搜索
const filteredFoodList = computed(() => {
  if (!searchText.value) return foodList.value;
  return foodList.value.filter(food =>
    food.foodIntro && food.foodIntro.toLowerCase().includes(searchText.value.toLowerCase())
  );
});


const handleBuy = (food) => {
  foodData.value.foodId = food.foodId;
  foodData.value.userId = user.userId;

  addfoodOrder(foodData.value).then(res => {
    if (res.code !== 200) {
      console.error('购买失败:', res.message);
      return;
    }
    alert('点击成功，待支付状态,进入支付');
  
    
  })
    //跳转info页面
  router.push('/info');
};

const selectAll = () => {
  findAll({ custom: { showLoading: true } }).then(res => {
    console.log('获取餐品数据成功:', res.data);
    foodList.value = res.data;
  }).catch(err => {
    console.error('获取餐品数据失败：', err);
  });
};

const goToAIChat = () => {
  router.push('/ai-chat');
};
const goToInfo = () => {
  router.push('/info');
};

onMounted(() => {
  Object.assign(user, userStore.currentUser);
  
  selectAll();
});
</script>
<style scoped>
.search-bar {
  display: flex;
  align-items: center;
  justify-content: space-between; /* 左右分布 */
  margin-bottom: 20px;
}

.canteen-food-container {
  padding: 20px;
  position: relative;
}
.page-title {
  margin-bottom: 20px;
  font-size: 18px;
  font-weight: bold;
}
/* 统一食物图片尺寸并缩小 */
.uniform-food-img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  display: block;
  margin: 0 0 10px 0;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.food-info {
  line-height: 1.6;
}
.food-name {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 8px;
}
.food-intro {
  color: #666;
  margin-bottom: 8px;
}
.food-price-kcal {
  display: flex;
  justify-content: space-between;
  color: #333;
}
/* 悬浮球样式 */
.float-ball {
  position: fixed;
  right: 32px;
  bottom: 32px;
  width: 56px;
  height: 56px;
  background: #409eff;
  color: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  cursor: pointer;
  z-index: 1000;
  transition: background 0.2s;
}
.float-ball:hover {
  background: #66b1ff;
}
</style>